<template>
    <div class="searchInput">
        <el-input
            placeholder="请输入内容"
            v-model="input"
            clearable
            @clear='handlyClear()'>
        </el-input>
        <el-button icon="el-icon-search" @click="handlySearch"></el-button>
    </div>
</template>
<script>
export default {
    name:'SearchInput',
    data() {
        return {
            input:''
        }
    },
    methods:{
        handlySearch(){
            //用户页面
            if (this.$route.path==='/users') {
                this.$store.commit('users/CHANGE_QUERY',Number(this.input));
                let data={...this.$store.state.users.pagination};
                //console.log(data);
                this.$store.dispatch('users/Acs_getUserId',data)
            }
            //goods页面
           if (this.$route.path==='/goods') {
               this.$store.commit('goods/CHANGE_QUERY',Number(this.input));
               this.$store.dispatch('goods/Acs_getGoodsId')
           }
            //orders页面
           if (this.$route.path==='/orders') {
               console.log(Number(this.input));
               this.$store.commit('orders/CHANGE_PAGINATION',Number(this.input));
               this.$store.dispatch('orders/Acs_putOrdersId')
           }
        },
        handlyClear(){
             //用户页面
            if (this.$route.path==='/users') {
                this.$store.dispatch('users/Acs_getUserList');
            }
            //goods页面
            if (this.$route.path==='/goods') {
                this.$store.dispatch('goods/Acs_getGoods');
            }
            //orders页面
            if (this.$route.path==='/orders') {
                this.$store.dispatch('orders/Acs_getOrders',this.$store.state.orders.pagination);
            }
        }
    }
}
</script>
<style lang="scss" scoped>
    .searchInput{
        position: relative;
        margin-bottom: 20px;
        ::v-deep .el-input__inner{
            border-radius: 4px 0 0 4px;
        }
        ::v-deep .el-button{
                position: absolute;
                width: 60px;
                height: 100%;
                right: -60px;
                border-radius: 0 4px 4px 0;
                background-color: rgb(245, 247, 250);
                border: 1px solid #DCDFE6{
                    left: 0;
                }
            &:hover{
                color: rgb(96, 98, 102);
            }
        }

    }
   
</style>